﻿@page "/components/nav"
<Pager Title="Nav" Indicates="@(new[]{"Example","Horizontal Alignment","Vertical","Tabs","Pills","Fill & justified","Tab","Tab with pill"})">
	<Demo Title="Example">
		<Description>
			<code>NavRouteLink</code> as same as <code>NavLink</code> but with Bootstrap Class.
		</Description>
		<Run>
			<Nav>
				<NavItem>
					<NavRouteLink href="#" Actived>Home</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#">Active</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#" Disabled>Link</NavRouteLink>
				</NavItem>
			</Nav>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Nav>
	<NavItem>
		<NavRouteLink href=""#"" Actived>Home</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"">Active</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"" Disabled>Link</NavRouteLink>
	</NavItem>
</Nav>
```
")
		</Code>
	</Demo>
	<Demo Title="Horizontal Alignment">
			<Description>
				Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.
				<p>
				Centered with <code>JustifyContent(JustifyContent.Center)</code>
				</p>
			</Description>
		<Run>
			<Nav CssClass="Css.Class.JustifyContent(JustifyContent.Center)">
				<NavItem>
					<NavRouteLink href="#" Actived>Home</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#">Active</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#" Disabled>Link</NavRouteLink>
				</NavItem>
			</Nav>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Nav CssClass=""Css.Class.JustifyContent(JustifyContent.Center)"">
	<NavItem>
		<NavRouteLink href=""#"" Actived>Home</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"">Active</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"" Disabled>Link</NavRouteLink>
	</NavItem>
</Nav>
```
")
		</Code>
	</Demo>
	<Demo >
			<Description>
				Right-align with <code>JustifyContent(JustifyContent.End)</code>
			</Description>
		<Run>
						<Nav CssClass="Css.Class.JustifyContent(JustifyContent.End)">
				<NavItem>
					<NavRouteLink href="#" Actived>Home</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#">Active</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#" Disabled>Link</NavRouteLink>
				</NavItem>
			</Nav>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Nav CssClass=""Css.Class.JustifyContent(JustifyContent.End)"">
	<NavItem>
		<NavRouteLink href=""#"" Actived>Home</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"">Active</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"" Disabled>Link</NavRouteLink>
	</NavItem>
</Nav>
```
")
		</Code>
	</Demo>
		<Demo Title="Vertical">
		<Run>
			<Nav CssClass="Css.Class.FlexOrientation(FlexOrientation.Column)">
				<NavItem>
					<NavRouteLink href="#" Actived>Home</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#">Active</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#" Disabled>Link</NavRouteLink>
				</NavItem>
			</Nav>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Nav CssClass=""Css.Class.FlexOrientation(FlexOrientation.Column)"">
	<NavItem>
		<NavRouteLink href=""#"" Actived>Home</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"">Active</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"" Disabled>Link</NavRouteLink>
	</NavItem>
</Nav>
```
")
		</Code>
	</Demo>
			<Demo Title="Tabs">
		<Run>
			<Nav  Type="NavType.Pill">
				<NavItem>
					<NavRouteLink href="#" Actived>Home</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#">Active</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#" Disabled>Link</NavRouteLink>
				</NavItem>
			</Nav>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Nav Type=""NavType.Tab"">
	<NavItem>
		<NavRouteLink href=""#"" Actived>Home</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"">Active</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"" Disabled>Link</NavRouteLink>
	</NavItem>
</Nav>
```
")
		</Code>
	</Demo>
	<Demo Title="Pills">
		<Run>
			<Nav  Type="NavType.Pill">
				<NavItem>
					<NavRouteLink href="#" Actived>Home</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#">Active</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#" Disabled>Link</NavRouteLink>
				</NavItem>
			</Nav>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Nav Type=""NavType.Pill"">
	<NavItem>
		<NavRouteLink href=""#"" Actived>Home</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"">Active</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"" Disabled>Link</NavRouteLink>
	</NavItem>
</Nav>
```
")
		</Code>
	</Demo>
		<Demo Title="Fill & justified">
			<Description>
				Force your Nav’s contents to extend the full available width one of two modifier classes. 
				To proportionately fill all available space with your <code>NavItem</code>, use <code>Fill</code>. 
				Notice that all horizontal space is occupied, but not every nav item has the same width.
			</Description>
		<Run>
			<Nav  Type="NavType.Pill" Fill>
				<NavItem>
					<NavRouteLink href="#" Actived>Home</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#">Much longer nav link</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#">Link</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#" Disabled>Link</NavRouteLink>
				</NavItem>
			</Nav>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Nav Type=""NavType.Pill"" Fill>
	<NavItem>
		<NavRouteLink href=""#"" Actived>Home</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"">Much longer nav link</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"">Link</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"" Disabled>Link</NavRouteLink>
	</NavItem>
</Nav>
```
")
		</Code>
	</Demo>
			<Demo>
				<Description>
					For equal-width elements, use <code>Justified</code>. All horizontal space will be occupied by nav links, but unlike the <code>Fill</code> above, every nav item will be the same width.
				</Description>
		<Run>
			<Nav  Type="NavType.Pill" Justified>
				<NavItem>
					<NavRouteLink href="#" Actived>Home</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#">Much longer nav link</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#">Link</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#" Disabled>Link</NavRouteLink>
				</NavItem>
			</Nav>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Nav Type=""NavType.Pill"" Justified>
	<NavItem>
		<NavRouteLink href=""#"" Actived>Home</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"">Much longer nav link</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"">Link</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"" Disabled>Link</NavRouteLink>
	</NavItem>
</Nav>
```
")
		</Code>
	</Demo>
		<Demo Title="Tabs with dropdowns">
		<Run>
			<Nav  Type="NavType.Tab">
				<NavItem>
					<NavRouteLink href="#" Actived>Home</NavRouteLink>
				</NavItem>
				<NavDropDownItem>
					<ToggleContent>
						Drop Down
					</ToggleContent>
					<DropDownMenuContent>
						<DropDownLinkItem Actived href="#">Action</DropDownLinkItem>
						<DropDownLinkItem href="#">Action</DropDownLinkItem>
						<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
						<DropDownDividerItem/>
						<DropDownLinkItem href="#">Seperate Action</DropDownLinkItem>
					</DropDownMenuContent>
				</NavDropDownItem>
				<NavItem>
					<NavRouteLink href="#">Link</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#" Disabled>Link</NavRouteLink>
				</NavItem>
			</Nav>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Nav  Type=""NavType.Tab"">
	<NavItem>
		<NavRouteLink href=""#"" Actived>Home</NavRouteLink>
	</NavItem>
	<NavDropDownItem>
		<ToggleContent>
			Drop Down
		</ToggleContent>
		<DropDownMenuContent>
			<DropDownLinkItem Actived href=""#"">Action</DropDownLinkItem>
			<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
			<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
			<DropDownDivider/>
			<DropDownLinkItem href=""#"">Seperate Action</DropDownLinkItem>
		</DropDownMenuContent>
	</NavDropDownItem>
	<NavItem>
		<NavRouteLink href=""#"">Link</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"" Disabled>Link</NavRouteLink>
	</NavItem>
</Nav>
```
")
		</Code>
	</Demo>
		<Demo Title="Pills with dropdowns">
		<Run>
			<Nav Type="NavType.Pill">
				<NavItem>
					<NavRouteLink href="#" Actived>Home</NavRouteLink>
				</NavItem>
				<NavDropDownItem>
					<ToggleContent>
						Drop Down
					</ToggleContent>
					<DropDownMenuContent>
						<DropDownLinkItem Actived href="#">Action</DropDownLinkItem>
						<DropDownLinkItem href="#">Action</DropDownLinkItem>
						<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
						<DropDownDividerItem/>
						<DropDownLinkItem href="#">Seperate Action</DropDownLinkItem>
					</DropDownMenuContent>
				</NavDropDownItem>
				<NavItem>
					<NavRouteLink href="#">Link</NavRouteLink>
				</NavItem>
				<NavItem>
					<NavRouteLink href="#" Disabled>Link</NavRouteLink>
				</NavItem>
			</Nav>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Nav  Type=""NavType.Pill"">
	<NavItem>
		<NavRouteLink href=""#"" Actived>Home</NavRouteLink>
	</NavItem>
	<NavDropDownItem>
		<ToggleContent>
			Drop Down
		</ToggleContent>
		<DropDownMenuContent>
			<DropDownLinkItem Actived href=""#"">Action</DropDownLinkItem>
			<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
			<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
			<DropDownDividerItem/>
			<DropDownLinkItem href=""#"">Seperate Action</DropDownLinkItem>
		</DropDownMenuContent>
	</NavDropDownItem>
	<NavItem>
		<NavRouteLink href=""#"">Link</NavRouteLink>
	</NavItem>
	<NavItem>
		<NavRouteLink href=""#"" Disabled>Link</NavRouteLink>
	</NavItem>
</Nav>
```
")
		</Code>
	</Demo>
		<Demo Title="Tab">
			<Description>
				Use <code>Tab</code> component instead of <code>Nav</code> interaction.
			</Description>
		<Run>
			<Tab>
				<TabItem Title="Tab 1" Active>Tab 1 content</TabItem>
				<TabItem Title="Tab 2">Tab 2 content</TabItem>
				<TabItem Title="Tab 3">Tab 3 content</TabItem>
			</Tab>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Tab>
	<TabItem Title=""Tab 1"" Active>Tab 1 content</TabItem>
	<TabItem Title=""Tab 2"">Tab 2 content</TabItem>
	<TabItem Title=""Tab 3"">Tab 3 content</TabItem>
</Tab>
```
")
		</Code>
	</Demo>
			<Demo Title="Tab with pill">
		<Run>
			<Tab Type="NavType.Pill">
				<TabItem Title="Tab 1" Active>Tab 1 content</TabItem>
				<TabItem Title="Tab 2">Tab 2 content</TabItem>
				<TabItem Title="Tab 3">Tab 3 content</TabItem>
			</Tab>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Tab  Type=""NavType.Pill"">
	<TabItem Title=""Tab 1"" Active>Tab 1 content</TabItem>
	<TabItem Title=""Tab 2"">Tab 2 content</TabItem>
	<TabItem Title=""Tab 3"">Tab 3 content</TabItem>
</Tab>
```
")
		</Code>
	</Demo>
	<Demo>
		<Description>
			And with vertical pills.
		</Description>
		<Run>
			<Element CssClass="Css.Flex().AlignSelf(AlignItemsOrSelf.Start)">
			<Tab Type="NavType.Pill" CssClass="Css.Class.FlexOrientation(FlexOrientation.Column).Margin(SpaceNum.Three3, SpaceSide.Right)">
				<TabItem Title="Tab 1" Active>Tab 1 content</TabItem>
				<TabItem Title="Tab 2">Tab 2 content</TabItem>
				<TabItem Title="Tab 3">Tab 3 content</TabItem>
			</Tab>
			</Element>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Element CssClass=""Css.Flex().AlignSelf(AlignItemsOrSelf.Start)"">
	<Tab Type=""NavType.Pill"" CssClass=""Css.Class.FlexOrientation(FlexOrientation.Column).Margin(SpaceNum.Three3, SpaceSide.Right)"">
		<TabItem Title=""Tab 1"" Active>Tab 1 content</TabItem>
		<TabItem Title=""Tab 2"">Tab 2 content</TabItem>
		<TabItem Title=""Tab 3"">Tab 3 content</TabItem>
	</Tab>
</Element>
```
")
		</Code>
	</Demo>
</Pager>